<template>
	<div>
		<van-search placeholder="安耐晒" v-model="value" shape="round" @click="search" />
		<van-tabs v-model="active" sticky :offset-top="40">
			<van-tab title="推荐">

				<van-grid :border="false" :column-num="2">
					<van-grid-item :gutter="10" v-for="item in list" @click="tap(item._id)" class="sp">
						<van-image :src="item.coverImg" />
						<div class="desc">
							<p class="name">{{item.name}}</p>
							<p class="price"> ￥ {{item.price}}</p>
							<van-icon name="shopping-cart-o" @click.stop="add(item._id)" />
						</div>
					</van-grid-item>
				</van-grid>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</van-tab>
			<van-tab title="时尚彩妆">
				<van-grid :border="false" :column-num="2">
					<van-grid-item :gutter="10" v-for="item in list1" @click="tap(item.pid)" class="sp">
						<van-image :src="item.coverImg" />
						<div class="desc">
							<p class="name">{{item.name}}</p>
							<p class="price"> ￥ {{item.price}}</p>
							<van-icon name="shopping-cart-o" @click.stop="add(item._id)" />
						</div>
					</van-grid-item>
				</van-grid>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</van-tab>
			<van-tab title="护肤心得">
				<van-grid :border="false" :column-num="2">
					<van-grid-item :gutter="10" v-for="item in list2" @click="tap(item.pid)" class="sp">
						<van-image :src="item.coverImg" />
						<div class="desc">
							<p class="name">{{item.name}}</p>
							<p class="price"> ￥ {{item.price}}</p>
							<van-icon name="shopping-cart-o" @click.stop="add(item._id)" />
						</div>
					</van-grid-item>
				</van-grid>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</van-tab>
			<van-tab title="面膜">
				<van-grid :border="false" :column-num="2">
					<van-grid-item :gutter="10" v-for="item in list" @click="tap(item._id)" class="sp">
						<van-image :src="item.coverImg" />
						<div class="desc">
							<p class="name">{{item.name}}</p>
							<p class="price"> ￥ {{item.price}}</p>
							<van-icon name="shopping-cart-o" @click.stop="add(item._id)" />
						</div>
					</van-grid-item>
				</van-grid>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import * as api from '../api/getProlist';
	export default {
		name: "Quan",
		data() {
			return {
				title: "甜甜圈",
				list: [],
				list1: [],
				list2: [],
				active: 0,
				value: '',
				scrollY: ''
			}
		},
		mounted() {
			this.$emit('toparent', this.title)
			window.addEventListener('scroll', this.scrollToTop)
			api.getProlist({
					per: 50,
					page: 1,
					name: '朵色',
					product_category: [],
				}).then((data) => {
					this.list = data.data.products
				}),
				api.getProlist({
					per: 40,
					page: 1,
					name: '花',
					product_category: [],
				}).then((data) => {
					this.list1 = data.data.products
				}),
				api.getProlist({
					per: 50,
					page: 1,
					name: '服饰',
					product_category: [],
				}).then((data) => {
					this.list2 = data.data.products
				})
		},
		destroyed() {
			window.removeEventListener('scroll', this.scrollToTop)
		},
		methods: {
			// 点击回到顶部方法，加计时器是为了过渡顺滑
			backTop() {
				const that = this
				let timer = setInterval(() => {
					let ispeed = Math.floor(-that.scrollTop / 5)
					document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
					if (that.scrollTop === 0) {
						clearInterval(timer)
					}
				}, 16)
			},
			// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
			scrollToTop() {
				const that = this
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				that.scrollTop = scrollTop
				if (that.scrollTop > 200) {
					that.scrollY = true
				} else {
					that.scrollY = false
				}
			},
			search() {
				this.$router.push({
					path: '/fenlei',
					query: {
						id: '0'
					}
				})
			},
			tap(id) {
				console.log(id)
				this.$router.push('/detail/' + id)
			},
			add(id) {
				console.log(id)
				if (!localStorage.getItem('token')) {
					this.$toast('请先登录')
					this.$router.push('/login')
				} else {
					api.getAddcart({
						product: id,
						quantity: 1,
					}).then((data) => {
						console.log(data)
						console.log(id)
						this.$toast('加入购物车成功')
					})
				}
			}
		}
	}
</script>

<style scoped="">
	.icon-wpicon-shangjiantou {
		font-size: 20px;
		position: fixed;
		bottom: 50px;
		right: 30px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #666;
		opacity: 0.7;
	}

	.van-search {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		background: #fff;
	}

	.van-search__content {
		width: 293px;
		height: 25px;
	}

	.van-grid {
		margin-top: 40px;
	}

	.van-image {
		width: 152px;
		height: 152px;
	}

	.van-icon {
		font-size: 16px;
		width: 24px;
		height: 24px;
		border: 1px solid #d5616e;
		border-radius: 50%;
		text-align: center;
		line-height: 24px;
		background: #d5616e;
		color: #efd1d1;
		position: absolute;
		right: 13px;
		bottom: 20px;
	}

	.price {
		color: #d88694;
		font-size: 12px;
	}

	.name {
		width: 130px;
		height: 60px;
	}

	.sp {
		border-right: 2px solid #f9f9f9;
		border-bottom: 2px solid #f9f9f9;
	}

	.sp:nth-of-type(even) {
		border-right: 0;
	}
</style>
